<template>
  <div class="user-statistics">
    <h1>用户统计</h1>
    <div class="stats-cards">
      <div class="stat-row">
        <div class="stat-card">
          <div class="stat-value">{{ stats.totalUsers }}</div>
          <div class="stat-label">总用户数</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ stats.activeUsers }}</div>
          <div class="stat-label">活跃用户</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ stats.newUsers }}</div>
          <div class="stat-label">新增用户(本月)</div>
        </div>
        <div class="stat-card">
          <div class="stat-value">{{ stats.onlineUsers }}</div>
          <div class="stat-label">在线用户</div>
        </div>
      </div>
    </div>
    
    <div class="card">
      <h3>用户列表</h3>
      <div v-if="loading" class="loading">加载中...</div>
      <table v-else class="data-table">
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>注册时间</th>
            <th>最后登录</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in users" :key="item.id">
            <td>{{ item.id }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.email }}</td>
            <td>{{ item.registerDate }}</td>
            <td>{{ item.lastLogin }}</td>
            <td>
              <span :class="['status-badge', item.status === 'active' ? 'status-active' : 'status-inactive']">
                {{ item.status === 'active' ? '活跃' : '非活跃' }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
      
      <div class="pagination">
        <button 
          @click="handlePrevPage" 
          :disabled="currentPage <= 1"
          class="btn-pagination"
        >
          上一页
        </button>
        <span class="page-info">第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
        <button 
          @click="handleNextPage" 
          :disabled="currentPage >= totalPages"
          class="btn-pagination"
        >
          下一页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 数据相关
const stats = ref({
  totalUsers: 12840,
  activeUsers: 8560,
  newUsers: 1240,
  onlineUsers: 3420
})

const users = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)

// 模拟数据
const mockUsers = [
  { id: 1001, name: '张三', email: 'zhangsan@example.com', registerDate: '2025-01-15 10:30:00', lastLogin: '2025-11-06 09:15:00', status: 'active' },
  { id: 1002, name: '李四', email: 'lisi@example.com', registerDate: '2025-02-20 14:15:00', lastLogin: '2025-11-05 16:45:00', status: 'active' },
  { id: 1003, name: '王五', email: 'wangwu@example.com', registerDate: '2025-03-10 09:45:00', lastLogin: '2025-11-04 11:30:00', status: 'active' },
  { id: 1004, name: '赵六', email: 'zhaoliu@example.com', registerDate: '2025-04-05 16:20:00', lastLogin: '2025-11-03 14:20:00', status: 'inactive' },
  { id: 1005, name: '钱七', email: 'qianqi@example.com', registerDate: '2025-05-12 11:30:00', lastLogin: '2025-11-02 10:15:00', status: 'active' },
  { id: 1006, name: '孙八', email: 'sunba@example.com', registerDate: '2025-06-18 13:45:00', lastLogin: '2025-11-01 09:30:00', status: 'active' },
  { id: 1007, name: '周九', email: 'zhoujiu@example.com', registerDate: '2025-07-22 15:20:00', lastLogin: '2025-10-31 17:45:00', status: 'inactive' }
]

// 计算总页数
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// 获取当前页数据
const getCurrentPageData = () => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return mockUsers.slice(start, end)
}

// 获取用户数据
const fetchUsers = () => {
  loading.value = true
  // 模拟API调用延迟
  setTimeout(() => {
    users.value = getCurrentPageData()
    total.value = mockUsers.length
    loading.value = false
  }, 300)
}

// 分页相关
const handlePrevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--
    fetchUsers()
  }
}

const handleNextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++
    fetchUsers()
  }
}

onMounted(() => {
  fetchUsers()
})
</script>

<style scoped>
.user-statistics {
  padding: 20px;
}

.stats-cards {
  margin-bottom: 20px;
}

.stat-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  flex: 1;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 20px;
}

.card h3 {
  margin-top: 0;
  margin-bottom: 20px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.data-table th,
.data-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.data-table th {
  background-color: #f5f7fa;
  font-weight: bold;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.status-active {
  background-color: #e1f3d8;
  color: #67c23a;
}

.status-inactive {
  background-color: #f4f4f5;
  color: #909399;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.btn-pagination {
  background-color: #409eff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

.btn-pagination:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.page-info {
  color: #666;
}
</style>